import React from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { Link } from 'react-router';

import {
  ListGroup,
  Well
} from 'react-bootstrap';

import * as Apis from '../config/Apis';
import * as UserActions from '../actions/UserActions';
import { items as UserPage } from '../config/page/User';
import { share as ShareConfig } from '../config/Common';

import * as Shell from '../common/Shell';
import Container from '../components/Container';
import ListItem from '../components/ListItem';

class UserApp extends React.Component {

  constructor () {
    super();   
  }

  static propTypes = {
    
  }

  onStockTradeClick(event){
    event.preventDefault();
    let params = { url: Apis.stockTradeApi, showCloseBtn : true, title : '股票交易' };
    Shell.callShellMethod("webViewPlugin",  null, null, params);
  }

  formatPageData(){
    let { user } = this.props;
    let pageResult = [];
    if (user && user.khid && UserPage && UserPage.length > 0) {
      for(let i =0, len = UserPage.length; i<len; i++){
        let pageItem = UserPage[i];
        if (pageItem.isauth === "0" && user.isauth === "1") {
          continue;
        }
        pageResult.push(pageItem);
      }
    }
    return pageResult;
  }

  onShareClick(event){
    ShareConfig.url = ShareConfig.url + "&p=" + this.props.user.khid + "&broker=" + this.props.user.broker;
    //调用分享组件
    Shell.callShellMethod("sharePlugin", null, null, ShareConfig );

    event.preventDefault();
  }

  onAccountClick(event){
    event.preventDefault();
    Shell.callShellMethod("callOpenAccountPlugin");
  }

  render() {

    let { user } = this.props;

    let pageItems = this.formatPageData();
    
    return (
          <Container 
              isGoBack={false} 
              isHeader={true} 
              isHeaderMessage={true}
              isFooter={true} 
              footerIndex={3} 
              headerTitle={"我"}>

              <Well bsSize={"small"} className="well-container border-top-none">
                 <div className="text-center text-primary">
                    {
                      user && user.isauth==="1"?
                      <span>
                        <i className="iconfont icon-vip text-danger"></i>&nbsp;华西证券认证用户
                      </span>
                      :
                      <Link to="/Bind">
                        绑定证券账户，充值积分翻倍  
                      </Link>
                    }
                 </div>
              </Well>

              <Well bsSize={"small"} className="well-container">
                 <h5 className="text-primary">
                    我的积分余额
                 </h5>

                 <h1 className="text-danger">
                  {user.leftcash||""}
                 </h1>

                 <Link to="/Record" className="text-primary link-detail">
                    查看详情
                 </Link>
              </Well>

              <ListGroup>
                  { 
                    pageItems && pageItems.map(
                      (item, i) => (
                          item.onclick ? 
                          <ListItem item={ item } onClickHandle={ this[item.onclick].bind(this) }/>
                          :
                          <ListItem item={ item } />
                      )
                    )
                  }
              </ListGroup>

          </Container>
    );
  }
}

export default connect(state => ({
    user: state.user
}), dispatch => ({
    userAction: bindActionCreators(UserActions, dispatch)
}))(UserApp);
